<template>
  <div class="wrap">
    <marquee
      v-if="hdWarnList.length"
      direction="up"
      behavior="scroll"
      style="height: 100%"
    >
      <el-tooltip
        class="wrap-item"
        v-for="(item, key) in hdWarnList"
        :key="key"
        effect="dark"
        :content="item.warnInfo"
        placement="top"
      >
        <div class="">
          <div class="time">
            <p style="margin-right: 5px;">{{ item.cTime.split(" ")[0] }}</p>
            <p>{{ item.cTime.split(" ")[1] }}</p>
          </div>
          <div class="desc">
            {{ item.wcName }}{{ item.name }}{{ item.warnReason }}
          </div>
        </div>
      </el-tooltip>
    </marquee>
  </div>
</template>
<script>
export default {
  props: {
    hdWarnList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.wrap {
  width: 505px;
  height: 310px;
  box-sizing: border-box;
  padding: 80px 0px 0px 0px;
  background: url("../../assets/img/home-02.png") no-repeat center center;
  background-size: contain;

  .wrap-item {
    width: 458px;
    height: 52px;
    position: relative;
    background: rgba(79, 203, 255, 0.15);
    border-radius: 2px;
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 13px;
    text-align: left;
    padding-left: 40px;
    display: flex;
    align-items: center;

    &:last-child {
      margin-bottom: 0px;
    }
    &::before {
      content: "";
      position: absolute;
      top: 21px;
      left: 20px;
      width: 9px;
      height: 9px;
      background: #33fdff;
      border-radius: 50%;
    }
    .time {
      min-width: 120px;
      display: flex;
      p {
        margin: 0;
      }
    }
    .desc {
      margin-left: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}
</style>